<html>

<head>
    <meta charset="utf-8">
    <title>WAKEUP</title>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="CSS5, css5.com.cn">
    <link rel="stylesheet" href="../css/vital.css" />
    <script src="../js/bemfaHttp.js" type="text/javascript"></script>
    <script src="../js/zepto.min.js" type="text/javascript"></script>
</head>

<body class="layouts layouts_index">
    <!--HTML-->
    <div id="alert" class="center"
        style="display: none; width:100vw;height:100vh;background:rgba(44, 43, 43, 0.8);position:absolute;top:0;left:0"
        z-index="2">
        <div style="height:30vh"></div>
        <div class="center" style="width:100%;">
            <div class="bg-white center" style="margin:0 auto;width: 90%;max-width: 600px;">
                <h2>提示</h2>
                <div id="alert-msg" style="height:10%;">
                </div>
                <div style="padding-bottom: 5px;">
                    <p><a id="btn-alert" href="#" class="btn small red">OK</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row header light-text bg-blue">
        <div class="section ui-p-l-1">
            <h2 style="line-height: 4.5rem;margin-top: 0 !important;">Free IoT</h2>
        </div>
    </div>

    <div class="contents">
        <div id="config" class="row" style="display: none;">
            <div class="grid-preview">
                <div>
                    <h3 class="center">Config</h3>
                    <div style="border:0" class="box bg-white full-width-forms">
                        <p><label><small>
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">HOSTNAME</font>
                                    </font>
                                </small></label><input id="hostname" placeholder="Hostname" type="text"></p>
                        <p><label><small>
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">PASSWORD</font>
                                    </font>
                                </small></label><input id="password" placeholder="Password" type="text"></p>

                        <p><label><small>
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">Bemfa Token/UID</font>
                                    </font>
                                </small></label><input id="token" placeholder="Token" type="text"></p>

                        <div class="row">
                            <div class="col-1-3">
                                <a id="btn-save" href="#" class="btn large no-outline red">SAVE</a>
                            </div>
                            <div class="col-1-3">
                                <a id="btn-clear" href="#" class="btn large no-outline red">CLEAR</a>
                            </div>
                            <div class="col-1-3">
                                <a id="btn-cancel" href="#" class="btn large no-outline red">CANCEL</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="panel" class="row">
            <div class="section full-width-forms">
                <h3 class="center">STATUS</h1>
                    <p class="center"><span id="power-state" class="ui-p-x-1">POWER</span> <span id="locker-state"
                            class="ui-p-x-1">LOCKER</span></p>
            </div>

            <div class="grid-preview">
                <div class="col-1-2 center ui-p-x-1 full-width-forms">
                    <p><a href="#" class="btn-panel btn large solid blue" topic="PCWatchmenPCIEXX999"
                            cmd="locker#1">LOCK</a></p>
                </div>
                <div class="col-1-2 center ui-p-x-1 full-width-forms">
                    <p><a href="#" class="btn-panel btn large solid blue" topic="PCWatchmenPCIEXX999"
                            cmd="locker#0">UNLOCK</a>
                    </p>
                </div>
                <div class="col-1-2 center ui-p-x-1 full-width-forms">
                    <p><a href="#" class="btn-panel btn large solid blue" topic="PCWatchmenPCIEXX999" cmd="on#">PULL
                            ONCE</a></p>
                </div>
                <div class="col-1-2 center ui-p-x-1 full-width-forms">
                    <p><a href="#" class="btn-panel btn large solid red" topic="PCWatchmenPCIEXX999"
                            cmd="shutdown#">SHUTDOWN</a>
                    </p>
                </div>

                <div class="center ui-p-x-1 full-width-forms">
                    <p><a id="btn-config" href="#" class="btn large no-outline red">CONFIG</a>
                    </p>
                </div>

            </div>
        </div>
    </div>

    <div class="row footer center">
        <div class="section">
            <hr>
            <p>by BH3PXN - © 2022</p>
        </div>
    </div>
    <!--HTML-->

    <script type="text/javascript">
        //<!--JS-->
        // 过滤所有特殊字符
        function stripscript(s) {
            var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？↵\r\n]");
            var rs = "";
            for (var i = 0; i < s.length; i++) {
                rs = rs + s.substr(i, 1).replace(pattern, '');
            }
            return rs;
        }

        var path = document.URL;
        path = path.substring(path.lastIndexOf('/'));
        path = stripscript(path);
        var token = localStorage.getItem(path + "_token") == null ? "" : localStorage.getItem(path + "_token");
        var password = localStorage.getItem(path + "_password") == null ? "" : localStorage.getItem(path + "_password");
        var hostname = localStorage.getItem(path + "_hostname") == null ? "" : localStorage.getItem(path + "_hostname");


        $(document).on('click', '#btn-alert', function () {
            $('#alert').hide();
        });
        function ui_alert(_msg) {
            $('#alert-msg').html(_msg);
            $('#alert').show();
        }


        $(document).ready(function () {
            start();
        })

        //页面程序入口
        function start() {
            if (token.length == 0 || password.length == 0 || hostname.length == 0) {
                ui_alert('请先设置相应参数');
            } else {
                get_state();
            }
        }

        $(document).on('click', '.btn-panel', function () {
            let topic = hostname + "XX" + $(this).attr('topic');
            let message = password + "#" + $(this).attr('cmd');
            bemfaHttpd.sendMessage(topic, message);
            setTimeout(get_state, 2000);

        });

        $(document).on('click', '#btn-config', function () {
            $('#token').val(token);
            $('#password').val(password);
            $('#hostname').val(hostname);
            $('#config').show();
            $('#panel').hide();

        });

        $(document).on('click', '#btn-save', function () {
            token = $('#token').val();
            password = $('#password').val();
            hostname = $('#hostname').val();
            localStorage.setItem(path + '_token', token);
            localStorage.setItem(path + '_password', password);
            localStorage.setItem(path + '_hostname', hostname);

            $('#config').hide();
            $('#panel').show();
            window.location.reload();
        });

        $(document).on('click', '#btn-clear', function () {
            token = "";
            password = "";
            hostname = "";
            localStorage.setItem(path + '_token', token);
            localStorage.setItem(path + '_password', password);
            localStorage.setItem(path + '_hostname', hostname);
            $('#token').val(token);
            $('#password').val(password);
            $('#hostname').val(hostname);
        });

        $(document).on('click', '#btn-cancel', function () {
            $('#config').hide();
            $('#panel').show();
            window.location.reload();
        });

        var bemfaHttpd = new BemfaHTTP();
        bemfaHttpd.setToken(token);

        var timer = null;
        function update_power_state(_state) {
            if (_state == "1") {
                $('#power-state').html('POWER:ON');
                $('#power-state').removeClass('ui-text-red');
                $('#power-state').addClass('ui-text-green');
            } else {
                $('#power-state').html('POWER:OFF');
                $('#power-state').removeClass('ui-text-green');
                $('#power-state').addClass('ui-text-red');
            }
        }

        function update_locker_state(_state) {
            if (_state == "1") {
                $('#locker-state').html('LOCKER:ON');
                $('#locker-state').removeClass('ui-text-red');
                $('#locker-state').addClass('ui-text-green');
            } else {
                $('#locker-state').html('LOCKER:OFF');
                $('#locker-state').removeClass('ui-text-green');
                $('#locker-state').addClass('ui-text-red');
            }
        }

        function get_state() {
            clearTimeout(timer);
            let topic = hostname + "XXPCWatchmenPCIEXX999";
            let getStateMsg = password + "#state#";
            bemfaHttpd.sendMessage(topic, getStateMsg, function () {
                setTimeout(function () {
                    bemfaHttpd.getMessage(topic, 2, function (e) {
                        let data = e.data;
                        for (let i = data.length - 1; i >= 0; i--) {
                            let msg = data[i].msg
                            if (msg.indexOf("state#") == 0 && msg.length == 9) {
                                let arr = msg.split("#");
                                update_power_state(arr[1]);
                                update_locker_state(arr[2]);
                            }
                        }
                    });
                }, 2000);

            });
            timer = setTimeout(get_state, 10000);
        }

    //<!--JS-->
    </script>

</body>
</html>